<template>
  <view class="todo-container">
    <!-- 通知中心弹窗 -->
    <u-popup
      v-model="showNotificationCenter"
      mode="right"
      width="80%"
      :safe-area-inset-bottom="true"
      border-radius="16"
    >
      <view class="notification-center">
        <view class="notification-header">
          <text class="notification-title">通知中心</text>
          <u-icon name="close" size="36" color="#64748b" @click="showNotificationCenter = false"></u-icon>
        </view>

        <scroll-view scroll-y class="notification-list">
          <view class="notification-empty" v-if="notifications.length === 0">
            <u-empty mode="message" text="暂无通知" icon="bell"></u-empty>
          </view>

          <view v-else>
            <view
              class="notification-item"
              v-for="(item, index) in notifications"
              :key="index"
              :class="{'unread': !item.read}"
              @click="readNotification(item)"
            >
              <view class="notification-icon" :class="'type-' + item.type">
                <u-icon :name="getNotificationIcon(item.type)" size="34" color="#fff"></u-icon>
              </view>
              <view class="notification-content">
                <view class="notification-info">
                  <text class="notification-msg">{{ item.message }}</text>
                  <text class="notification-time">{{ item.time }}</text>
                </view>
                <text class="notification-desc">{{ item.description }}</text>
              </view>
            </view>
          </view>
        </scroll-view>

        <view class="notification-actions">
          <u-button type="primary" plain @click="readAllNotifications">全部已读</u-button>
          <u-button type="error" plain @click="clearAllNotifications">清空通知</u-button>
        </view>
      </view>
    </u-popup>

    <view class="page-header">
      <text class="header-title">待办事项</text>
      <text class="header-subtitle">今日待办 {{ stats.totalCount }} 项</text>
      <view class="notification-btn" @click="showNotificationCenter = true">
        <u-badge :count="unreadCount" :offset="[-8, -8]" size="mini"></u-badge>
        <u-icon name="bell" color="#fff" size="38"></u-icon>
      </view>
      <view class="header-wave"></view>
    </view>

    <view class="stats-cards">
      <view class="stat-card" @click="onTabClick(0)" :class="{'active': currentTab === 0}">
        <view class="stat-value">{{ stats.expiringSoon }}</view>
        <view class="stat-label">专线即将到期</view>
        <u-icon name="arrow-right" size="26" color="#bbb"></u-icon>
      </view>
      <view class="stat-card" @click="onTabClick(1)" :class="{'active': currentTab === 1}">
        <view class="stat-value">{{ stats.expired }}</view>
        <view class="stat-label">专线已到期</view>
        <u-icon name="arrow-right" size="26" color="#bbb"></u-icon>
      </view>
      <view class="stat-card" @click="onTabClick(2)" :class="{'active': currentTab === 2}">
        <view class="stat-value">{{ stats.incomplete }}</view>
        <view class="stat-label">待完善商机</view>
        <u-icon name="arrow-right" size="26" color="#bbb"></u-icon>
      </view>
    </view>

    <view class="tab-container">
      <u-tabs
        :list="tabList"
        :current="Number(currentTab)"
        @change="onTabChange"
        :bold="true"
        active-color="#2563eb"
        bar-width="60"
        item-style="padding-left: 15px; padding-right: 15px; height: 80rpx;"
        font-size="30"
      ></u-tabs>
    </view>

    <!-- 列表容器 -->
    <view class="list-container">
      <!-- 即将到期专线列表 -->
      <view v-if="currentTab === 0">
        <u-empty v-if="expiringList.length === 0" mode="list" text="暂无即将到期专线" margin-top="100"></u-empty>

        <template v-else>
          <view class="list-header">
            <view class="header-left">
              <u-icon name="warning" color="#f59e0b" size="28"></u-icon>
              <text>以下专线需要在3个月内续约</text>
            </view>
          </view>

          <view class="list-item expiring-item" v-for="(item, index) in expiringList" :key="index">
            <view class="item-content">
              <view class="item-header">
                <view class="item-title">{{ item.groupName }}</view>
                <view
                  class="item-tag warning"
                  @click="navigateToDetail(item)"
                >{{ item.remainDays }}天后到期</view>
              </view>

              <view class="item-info">
                <view class="info-section">
                  <view class="info-row">
                    <view class="info-group">
                      <text class="info-label">客户编码</text>
                      <text class="info-value">{{ item.groupCode }}</text>
                      <text class="product-tag" v-if="item.lineType">{{ item.lineType }}</text>
                    </view>
                  </view>
                  <view class="info-row">
                    <view class="info-group">
                      <text class="info-label">异网资费</text>
                      <text class="info-value">{{ item.otherNetworkFee }}元/年</text>
                    </view>
                  </view>
                  <view class="info-row">
                    <view class="info-group">
                      <text class="info-label">到期时间</text>
                      <text class="info-value highlight-warning">{{ item.expireDate }}</text>
                      <view class="completion-action">
                        <u-button
                          type="warning"
                          size="mini"
                          plain="true"
                          @click="handleRenewal(item)"
                        >
                          去续约
                          <u-icon name="arrow-right" size="12" color="#f59e0b"></u-icon>
                        </u-button>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>

      <!-- 已到期专线列表 -->
      <view v-if="currentTab === 1">
        <u-empty v-if="expiredList.length === 0" mode="list" text="暂无已到期专线" margin-top="100"></u-empty>

        <template v-else>
          <view class="list-header">
            <view class="header-left">
              <u-icon name="error" color="#ef4444" size="28"></u-icon>
              <text>以下专线已经到期</text>
            </view>
          </view>

          <view class="list-item expired-item" v-for="(item, index) in expiredList" :key="index">
            <view class="item-content">
              <view class="item-header">
                <view class="item-title">{{ item.groupName }}</view>
                <view
                  class="item-tag danger"
                  @click="navigateToDetail(item)"
                >已逾期{{ item.overdueDays }}天</view>
              </view>

              <view class="item-info">
                <view class="info-section">
                  <view class="info-row">
                    <view class="info-group">
                      <text class="info-label">客户编码</text>
                      <text class="info-value">{{ item.groupCode }}</text>
                      <text class="product-tag" v-if="item.lineType">{{ item.lineType }}</text>
                    </view>
                  </view>
                  <view class="info-row">
                    <view class="info-group">
                      <text class="info-label">异网资费</text>
                      <text class="info-value">{{ item.otherNetworkFee }}元/年</text>
                    </view>
                  </view>
                  <view class="info-row">
                    <view class="info-group">
                      <text class="info-label">到期时间</text>
                      <text class="info-value highlight-danger">{{ item.expireDate }}</text>
                      <view class="completion-action">
                        <u-button
                          type="error"
                          size="mini"
                          plain="true"
                          @click="handleRenewal(item)"
                        >
                          去续约
                          <u-icon name="arrow-right" size="12" color="#ef4444"></u-icon>
                        </u-button>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>

      <!-- 待完善商机列表 -->
      <view v-if="currentTab === 2">
        <u-empty v-if="incompleteList.length === 0" mode="list" text="暂无待完善商机" margin-top="100"></u-empty>

        <template v-else>
          <view class="list-header">
            <view class="header-left">
              <u-icon name="info-circle" color="#10b981" size="28"></u-icon>
              <text>以下集团单位信息不完整</text>
            </view>
          </view>

          <view
            class="list-item incomplete-item"
            v-for="(item, index) in incompleteList"
            :key="index"
          >
            <view class="item-content">
              <view class="item-header">
                <view class="item-title">{{ item.groupName }}</view>
                <view class="item-tag info" @click="navigateToGroup(item)">待完善</view>
              </view>

              <view class="item-info">
                <view class="info-section">
                  <view class="info-row">
                    <view class="info-group">
                      <text class="info-label">客户编码</text>
                      <text class="info-value">{{ item.groupCode }}</text>
                      <text class="industry-tag" v-if="item.industry">{{ item.industry }}</text>
                    </view>
                  </view>
                  <view class="info-row">
                    <view class="info-group">
                      <text class="info-label">基本信息</text>
                      <text
                        class="info-value"
                        :class="item.hasBasicInfo ? 'status-completed' : 'status-incomplete'"
                      >{{ item.hasBasicInfo ? '已完善' : '未完善' }}</text>
                      <view class="completion-action" v-if="!item.hasBasicInfo">
                        <u-button
                          type="primary"
                          size="mini"
                          plain="true"
                          @click="completeInfo(item, 'basic')"
                        >
                          去完善
                          <u-icon name="arrow-right" size="12" color="#2196f3"></u-icon>
                        </u-button>
                      </view>
                    </view>
                  </view>
                  <view class="info-row">
                    <view class="info-group">
                      <text class="info-label">成员信息</text>
                      <text
                        class="info-value"
                        :class="item.hasMemberInfo ? 'status-completed' : 'status-incomplete'"
                      >{{ item.hasMemberInfo ? '已完善' : '未完善' }}</text>
                      <view class="completion-action" v-if="!item.hasMemberInfo">
                        <u-button
                          type="success"
                          size="mini"
                          plain="true"
                          @click="completeInfo(item, 'member')"
                        >
                          去完善
                          <u-icon name="arrow-right" size="12" color="#10b981"></u-icon>
                        </u-button>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        { name: "即将到期" },
        { name: "已到期" },
        { name: "待完善商机" }
      ],
      currentTab: 0,
      stats: {
        totalCount: 0,
        expiringSoon: 0,
        expired: 0,
        incomplete: 0
      },
      expiringList: [],
      expiredList: [],
      incompleteList: [],
      // 通知中心
      showNotificationCenter: false,
      notifications: [],
      unreadCount: 0
    };
  },
  onLoad() {
    this.fetchTodoStats();
    this.fetchTodoList();
    this.fetchNotifications();
  },
  onShow() {
    // 每次页面显示时刷新数据，因为用户可能从其他页面处理了待办事项后返回
    this.fetchTodoStats();
    this.fetchTodoList();
    this.checkNewNotifications();
  },
  // 页面上拉触底事件处理函数
  onPullDownRefresh() {
    // 下拉刷新
    this.fetchTodoStats();
    this.fetchTodoList();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return "未知";

      // 处理时间戳格式
      if (!isNaN(dateStr) && String(dateStr).length >= 10) {
        const date = new Date(
          Number(dateStr) * (String(dateStr).length === 10 ? 1000 : 1)
        );
        return (
          date.getFullYear() +
          "-" +
          String(date.getMonth() + 1).padStart(2, "0") +
          "-" +
          String(date.getDate()).padStart(2, "0")
        );
      }

      // 已经是格式化的日期字符串
      return dateStr;
    },

    // 获取待办事项统计数据
    fetchTodoStats() {
      uni.showLoading({
        title: "加载中"
      });

      // 调用API获取待办事项统计
      this.$http
        .sendRequest("zhanke/todo_statistics", "POST", {})
        .then(res => {
          uni.hideLoading();

          if (res.data && res.data.code === 200 && res.data.data) {
            this.stats = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg || "获取统计数据失败",
              icon: "none"
            });

            // 初始化为0
            this.stats = {
              totalCount: 0,
              expiringSoon: 0,
              expired: 0,
              incomplete: 0
            };
          }
        })
        .catch(err => {
          uni.hideLoading();
          console.error("获取待办统计失败", err);

          uni.showToast({
            title: "暂无数据",
            icon: "none"
          });

          // 初始化为0
          this.stats = {
            totalCount: 0,
            expiringSoon: 0,
            expired: 0,
            incomplete: 0
          };
        });
    },

    // 获取待办事项列表
    fetchTodoList() {
      // 显示加载中
      uni.showLoading({
        title: "加载中"
      });

      // 确保清空之前的数据，避免渲染问题
      this.expiringList = [];
      this.expiredList = [];
      this.incompleteList = [];

      // 1. 获取即将到期专线
      this.$http
        .sendRequest("zhanke/expiring_soon", "POST", {})
        .then(res => {
          if (res.data && res.data.code === 200) {
            const list = res.data.data || [];
            // 格式化数据
            this.expiringList = list.map(item => ({
              id: item.id,
              groupCode: item.groupCode,
              groupName: item.groupName,
              lineType: item.productName,
              otherNetworkFee: item.otherNetworkFee || "0",
              expireDate: this.formatDate(item.expireDate),
              remainDays: item.remainDays || 0,
              expansionId: item.expansionId
            }));
            // 添加调试日志，查看到期时间数据
            console.log("加载即将到期专线:", this.expiringList.length);
            console.log(
              "即将到期专线数据示例:",
              this.expiringList[0] || "无数据"
            );
          } else {
            console.error("获取即将到期专线失败", res.data.msg);
            this.expiringList = [];
          }

          // 继续加载已到期专线
          this.fetchExpiredList();
        })
        .catch(err => {
          console.error("获取即将到期专线请求失败", err);
          this.expiringList = [];

          // 继续加载已到期专线
          this.fetchExpiredList();
        });
    },

    // 获取已到期专线
    fetchExpiredList() {
      this.$http
        .sendRequest("zhanke/expired", "POST", {})
        .then(res => {
          if (res.data && res.data.code === 200) {
            const list = res.data.data || [];
            // 格式化数据
            this.expiredList = list.map(item => ({
              id: item.id,
              groupCode: item.groupCode,
              groupName: item.groupName,
              lineType: item.productName,
              otherNetworkFee: item.otherNetworkFee || "0",
              expireDate: this.formatDate(item.expireDate),
              overdueDays: item.overdueDays || 0,
              expansionId: item.expansionId
            }));
            console.log("加载已到期专线:", this.expiredList.length);
            console.log("已到期专线数据示例:", this.expiredList[0] || "无数据");
          } else {
            console.error("获取已到期专线失败", res.data.msg);
            this.expiredList = [];
          }

          // 继续加载待完善商机
          this.fetchIncompleteList();
        })
        .catch(err => {
          console.error("获取已到期专线请求失败", err);
          this.expiredList = [];

          // 继续加载待完善商机
          this.fetchIncompleteList();
        });
    },

    // 获取待完善商机
    fetchIncompleteList() {
      this.$http
        .sendRequest("zhanke/incomplete", "POST", {})
        .then(res => {
          if (res.data && res.data.code === 200) {
            const list = res.data.data || [];
            // 格式化数据
            this.incompleteList = list.map(item => ({
              id: item.id || "",
              groupCode: item.groupCode,
              groupName: item.groupName,
              industry: item.industry,
              hasBasicInfo: item.hasBasicInfo === 1,
              hasMemberInfo: item.hasMemberInfo === 1
            }));
            console.log("加载待完善商机:", this.incompleteList.length);
          } else {
            console.error("获取待完善商机失败", res.data.msg);
            this.incompleteList = [];
          }

          // 完成加载
          uni.hideLoading();
        })
        .catch(err => {
          console.error("获取待完善商机请求失败", err);
          this.incompleteList = [];

          // 完成加载
          uni.hideLoading();

          uni.showToast({
            title: "暂无数据",
            icon: "none"
          });
        });
    },

    // Tab点击事件
    onTabClick(index) {
      this.currentTab = Number(index);

      // 添加延时滚动到对应区域
      setTimeout(() => {
        const query = uni.createSelectorQuery();
        query.select(".tab-container").boundingClientRect();
        query.exec(res => {
          if (res && res[0]) {
            uni.pageScrollTo({
              scrollTop: res[0].top - 10,
              duration: 300
            });
          }
        });
      }, 100);
    },

    // Tab切换事件
    onTabChange(index) {
      // 转换为数字类型，确保类型一致性
      if (typeof index === "object" && index.index !== undefined) {
        this.currentTab = Number(index.index);
      } else {
        this.currentTab = Number(index);
      }
    },

    // 导航到拓展详情
    navigateToDetail(item) {
      uni.navigateTo({
        url: `/pages/business/expansion/detail?groupCode=${
          item.groupCode
        }&expansionId=${item.expansionId || "1"}`
      });
    },

    // 导航到集团详情
    navigateToGroup(item) {
      uni.navigateTo({
        url: `/pages/group/detail?groupCode=${item.groupCode}`
      });
    },

    // 处理续约
    handleRenewal(item) {
      uni.navigateTo({
        url: `/pages/business/expansion/index?groupCode=${item.groupCode}`
      });
    },

    // 完善信息
    completeInfo(item, type) {
      if (type === "basic") {
        uni.navigateTo({
          url: `/pages/business/basic?groupCode=${item.groupCode}`
        });
      } else if (type === "member") {
        uni.navigateTo({
          url: `/pages/business/basic?groupCode=${item.groupCode}`
        });
      }
    },

    // 获取通知中心数据
    fetchNotifications() {
      // 这里应该是调用通知相关的API
      // 目前API文档中没有相关接口，暂时保留原模拟数据逻辑
      setTimeout(() => {
        this.notifications = [
          {
            id: "note_001",
            type: "warning",
            message: "专线即将到期提醒",
            description: "平凉市政府的互联网专线将在78天后到期",
            time: "2023-09-01 10:30",
            read: false
          },
          {
            id: "note_002",
            type: "error",
            message: "专线已过期提醒",
            description: "甘肃银行总行的互联网专线已逾期15天",
            time: "2023-08-20 08:45",
            read: true
          },
          {
            id: "note_003",
            type: "info",
            message: "商机信息待完善",
            description: "甘肃省农业农村厅的基本信息和成员信息尚未完善",
            time: "2023-08-18 14:20",
            read: false
          },
          {
            id: "note_004",
            type: "success",
            message: "商机已落地",
            description: "兰州大学的MPLS-VPN专线商机已成功落地",
            time: "2023-08-15 16:30",
            read: false
          }
        ];

        this.calculateUnreadCount();
      }, 600);

      // TODO: 后续添加通知API时可以改为如下调用形式：
      /*
      this.$http
        .sendRequest("zhanke/notifications", "POST", {})
        .then(res => {
          if (res.data && res.data.code === 200) {
            this.notifications = res.data.data || [];
            this.calculateUnreadCount();
          } else {
            console.error("获取通知列表失败", res.data.msg);
            this.notifications = [];
            this.unreadCount = 0;
          }
        })
        .catch(err => {
          console.error("获取通知列表请求失败", err);
          this.notifications = [];
          this.unreadCount = 0;
        });
      */
    },

    // 计算未读通知数量
    calculateUnreadCount() {
      this.unreadCount = this.notifications.filter(item => !item.read).length;
    },

    // 检查新通知
    checkNewNotifications() {
      // 实际应用中应该有一个API来获取最新通知，这里暂时保留模拟方法
      // 未来可以更换为实际API调用
      this.fetchNotifications();
    },

    // 标记通知为已读
    readNotification(notification) {
      // 在实际应用中应该调用接口更新通知状态
      notification.read = true;
      this.calculateUnreadCount();

      // 根据通知类型执行不同的操作
      if (notification.type === "warning") {
        this.currentTab = 0; // 切换到即将到期专线
      } else if (notification.type === "error") {
        this.currentTab = 1; // 切换到已到期专线
      } else if (notification.type === "info") {
        this.currentTab = 2; // 切换到待完善商机
      } else if (notification.type === "success") {
        this.currentTab = 0; // 默认切换到即将到期专线
      }

      this.showNotificationCenter = false;
    },

    // 全部标记为已读
    readAllNotifications() {
      // 在实际应用中应该调用接口更新所有通知状态
      this.notifications.forEach(note => {
        note.read = true;
      });
      this.calculateUnreadCount();
      uni.showToast({
        title: "已全部标记为已读",
        icon: "success"
      });
    },

    // 清空全部通知
    clearAllNotifications() {
      uni.showModal({
        title: "确认清空",
        content: "确定要清空所有通知吗？",
        success: res => {
          if (res.confirm) {
            // 在实际应用中应该调用接口清空通知
            this.notifications = [];
            this.unreadCount = 0;
            uni.showToast({
              title: "已清空全部通知",
              icon: "success"
            });
          }
        }
      });
    },

    // 获取通知图标
    getNotificationIcon(type) {
      switch (type) {
        case "warning":
          return "warning";
        case "error":
          return "error";
        case "success":
          return "checkmark-circle";
        case "info":
        default:
          return "info-circle";
      }
    }
  }
};
</script>

<style lang="scss">
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.todo-container {
  min-height: 100vh;
  background-color: #f8fafc;
  padding-bottom: 40rpx;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  .list-item-animate {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
  }

  .page-header {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    padding: 90rpx 30rpx 70rpx;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6rpx 16rpx rgba(59, 130, 246, 0.3);

    .header-title {
      font-size: 46rpx;
      font-weight: 700;
      margin-bottom: 8rpx;
      position: relative;
      z-index: 2;
      letter-spacing: 0.5px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .header-subtitle {
      font-size: 28rpx;
      opacity: 0.95;
      position: relative;
      z-index: 2;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .notification-btn {
      position: absolute;
      top: 80rpx;
      right: 30rpx;
      z-index: 3;
      width: 80rpx;
      height: 80rpx;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
      animation: pulse 2s infinite ease-in-out;

      &:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 0.25);
      }
    }

    .header-wave {
      position: absolute;
      bottom: -2rpx;
      left: 0;
      width: 100%;
      height: 32rpx;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="white" fill-opacity="1" d="M0,128L48,144C96,160,192,192,288,197.3C384,203,480,181,576,181.3C672,181,768,203,864,202.7C960,203,1056,181,1152,165.3C1248,149,1344,139,1392,133.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
      background-size: cover;
      z-index: 1;
    }

    &::before {
      content: "";
      position: absolute;
      top: -50rpx;
      right: -50rpx;
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      z-index: 0;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 60rpx;
      left: -30rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      z-index: 0;
    }
  }

  .stats-cards {
    margin: -40rpx 20rpx 20rpx;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;

    .stat-card {
      background-color: #ffffff;
      border-radius: 16rpx;
      padding: 24rpx 20rpx;
      width: 32%;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      position: relative;
      transition: all 0.3s ease;
      overflow: hidden;
      border: 1px solid rgba(245, 247, 250, 0.85);

      &:hover,
      &:active {
        transform: translateY(-2rpx);
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.09);
      }

      .stat-value {
        font-size: 40rpx;
        font-weight: 700;
        color: #222222;
        margin-bottom: 8rpx;
        position: relative;
        z-index: 2;
      }

      .stat-label {
        font-size: 24rpx;
        color: #4b5563;
        padding-right: 24rpx;
        position: relative;
        z-index: 2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      u-icon {
        position: absolute;
        right: 14rpx;
        bottom: 16rpx;
        z-index: 2;
        opacity: 0.6;
      }

      &:nth-child(1) {
        background: linear-gradient(135deg, #fffbeb, #fff7ed);
        .stat-value {
          color: #b45309;
        }
      }

      &:nth-child(2) {
        background: linear-gradient(135deg, #fef2f2, #fee2e2);
        .stat-value {
          color: #b91c1c;
        }
      }

      &:nth-child(3) {
        background: linear-gradient(135deg, #ecfdf5, #d1fae5);
        .stat-value {
          color: #047857;
        }
      }

      &.active {
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);

        &:nth-child(1) {
          background: linear-gradient(135deg, #fbbf24, #f59e0b);
          .stat-value,
          .stat-label {
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          }
          u-icon {
            color: #fff !important;
            opacity: 0.9;
          }
        }

        &:nth-child(2) {
          background: linear-gradient(135deg, #ef4444, #dc2626);
          .stat-value,
          .stat-label {
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          }
          u-icon {
            color: #fff !important;
            opacity: 0.9;
          }
        }

        &:nth-child(3) {
          background: linear-gradient(135deg, #10b981, #059669);
          .stat-value,
          .stat-label {
            color: #fff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          }
          u-icon {
            color: #fff !important;
            opacity: 0.9;
          }
        }
      }
    }
  }

  .tab-container {
    margin: 20rpx 20rpx 0;
    background-color: #ffffff;
    border-radius: 16rpx 16rpx 0 0;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(245, 247, 250, 0.85);
    border-bottom: none;
  }

  /deep/ .u-tabs__wrapper {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0 6rpx;
  }

  /deep/ .u-tabs__wrapper__nav__item {
    padding: 0 16rpx;
  }

  /deep/ .u-tabs__wrapper__nav__item__text {
    color: #333333;
    font-weight: 500;
    font-size: 26rpx;
  }

  /deep/ .u-tabs__wrapper__nav__item--active .u-tabs__wrapper__nav__item__text {
    color: #2563eb;
    font-weight: 600;
  }

  .list-container {
    margin: 0 20rpx 20rpx;
    background-color: #ffffff;
    border-radius: 0 0 16rpx 16rpx;
    padding: 0;
    min-height: 600rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* 增加ios滚动惯性 */
    border: 1px solid rgba(245, 247, 250, 0.85);
    border-top: none;
  }

  .list-header {
    padding: 16rpx 20rpx;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8fafc;
    position: relative;
    z-index: 2;

    .header-left {
      display: flex;
      align-items: center;

      text {
        margin-left: 8rpx;
        font-size: 24rpx;
        color: #333333;
        font-weight: 600;
      }
    }
  }

  .list-item {
    margin: 16rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 1px solid #f1f5f9;
    display: block;
    animation: fadeIn 0.3s ease-out;

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10rpx);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
    }

    .item-content {
      flex: 1;
      padding: 0;
    }

    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 16rpx;
      margin-bottom: 16rpx;
      border-bottom: 1px solid #f1f5f9;

      .item-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.4;
        max-width: 65%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .item-tag {
        font-size: 22rpx;
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
        font-weight: 500;

        &.warning {
          background-color: #fff7ed;
          color: #c2410c;
          border: 1px solid rgba(194, 65, 12, 0.2);
        }

        &.danger {
          background-color: #fef2f2;
          color: #b91c1c;
          border: 1px solid rgba(185, 28, 28, 0.2);
        }

        &.info {
          background-color: #ecfdf5;
          color: #047857;
          border: 1px solid rgba(4, 120, 87, 0.2);
        }
      }
    }

    .item-info {
      padding: 0;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;

      .info-section {
        margin-bottom: 8rpx;
      }

      .info-section-title {
        font-size: 22rpx;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 6rpx;
      }

      .info-row {
        display: flex;
        margin-bottom: 16rpx;
        font-size: 26rpx;
      }

      .info-group {
        display: flex;
        width: 100%;
        align-items: center;

        .info-label {
          color: #64748b;
          font-weight: 400;
          width: 130rpx;
          flex-shrink: 0;

          &::after {
            content: "：";
          }
        }

        .info-value {
          color: #334155;
          font-weight: 500;
          flex: 1;

          &.highlight-warning {
            color: #d97706;
            font-weight: 600;
            text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.8);
            position: relative;
            display: inline-block;
            padding: 2rpx 8rpx;
            background-color: transparent;
            border-radius: 4rpx;
          }

          &.highlight-danger {
            color: #b91c1c;
            font-weight: 600;
            text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.8);
            position: relative;
            display: inline-block;
            padding: 2rpx 8rpx;
            background-color: transparent;
            border-radius: 4rpx;
          }

          &.status-completed {
            color: #0f766e;
          }

          &.status-incomplete {
            color: #b91c1c;
          }
        }

        .completion-action {
          margin-left: auto;

          /deep/ .u-button {
            height: 42rpx !important;
            line-height: 42rpx !important;
            padding: 0 12rpx !important;
            margin: 0 !important;
            background-color: transparent !important;
            border-radius: 4rpx !important;
            border: none !important;
            box-shadow: none !important;

            &--primary {
              border-color: transparent !important;
            }

            &--success {
              border-color: transparent !important;
            }

            /deep/ .u-button__text {
              font-size: 24rpx !important;
              font-weight: 500 !important;
              display: flex;
              align-items: center;
            }
          }

          /deep/ .u-button--primary {
            /deep/ .u-button__text {
              color: #2196f3 !important;
            }
          }

          /deep/ .u-button--success {
            /deep/ .u-button__text {
              color: #10b981 !important;
            }
          }

          /deep/ .u-button--warning {
            /deep/ .u-button__text {
              color: #f59e0b !important;
            }
          }

          /deep/ .u-button--error {
            /deep/ .u-button__text {
              color: #ef4444 !important;
            }
          }
        }
      }
    }

    .item-actions {
      padding-top: 14rpx;
      margin-top: 10rpx;
      border-top: 1px solid #f1f5f9;
      display: flex;
      justify-content: flex-end;

      .action-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 12rpx;

        .action-button {
          margin: 0;
          padding: 0 16rpx;
          min-width: 150rpx;
          height: 56rpx;
          line-height: 56rpx;
          border-radius: 6rpx;
          transition: all 0.2s ease;

          &:active {
            transform: scale(0.96);
            opacity: 0.9;
          }

          /deep/ .u-button__text {
            font-weight: 500;
            font-size: 24rpx;
          }
        }
      }

      u-button {
        margin-left: 12rpx;
        height: 56rpx;
        line-height: 56rpx;
        min-width: 150rpx;
        box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;

        &:active {
          transform: scale(0.96);
          box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
        }

        /deep/ .u-button__text {
          font-weight: 500;
          font-size: 24rpx;
        }
      }
    }
  }

  // 通知中心样式
  .notification-center {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #fff;

    .notification-header {
      padding: 36rpx 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f0f2f5;
      background-color: #f8fafc;

      .notification-title {
        font-size: 38rpx;
        font-weight: 700;
        color: #222222;
        position: relative;
        letter-spacing: 0.3px;
        text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.8);

        &::after {
          content: "";
          position: absolute;
          bottom: -8rpx;
          left: 0;
          width: 60rpx;
          height: 4rpx;
          background: #3b82f6;
          border-radius: 2rpx;
        }
      }
    }

    .notification-list {
      flex: 1;
      padding: 20rpx;

      .notification-empty {
        height: 400rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .notification-item {
        display: flex;
        padding: 28rpx;
        border-bottom: 1px solid #e5e7eb;
        position: relative;
        transition: all 0.2s;
        border-radius: 12rpx;
        margin-bottom: 10rpx;

        &:active {
          background-color: #f9fafb;
          transform: scale(0.99);
        }

        &.unread:before {
          content: "";
          position: absolute;
          top: 24rpx;
          right: 24rpx;
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          background-color: #dc2626;
          animation: pulse 2s infinite;
        }

        .notification-icon {
          width: 76rpx;
          height: 76rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          flex-shrink: 0;
          box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);

          &.type-warning {
            background-color: #f59e0b;
          }

          &.type-error {
            background-color: #ef4444;
          }

          &.type-success {
            background-color: #10b981;
          }

          &.type-info {
            background-color: #3b82f6;
          }
        }

        .notification-content {
          flex: 1;

          .notification-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12rpx;

            .notification-msg {
              font-size: 30rpx;
              font-weight: 700;
              color: #222222;
              letter-spacing: 0.2px;
              text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.8);
            }

            .notification-time {
              font-size: 24rpx;
              color: #606266;
              font-weight: 500;
              letter-spacing: 0.1px;
            }
          }

          .notification-desc {
            font-size: 26rpx;
            color: #374151;
            line-height: 1.5;
            letter-spacing: 0.2px;
            font-weight: 500;
            text-shadow: 0 0.3px 0 rgba(255, 255, 255, 0.9);
          }
        }
      }
    }

    .notification-actions {
      display: flex;
      justify-content: space-around;
      padding: 30rpx;
      border-top: 1px solid #f0f2f5;
      background-color: #f8fafc;

      u-button {
        flex: 1;
        margin: 0 10rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
        transition: all 0.3s;

        &:active {
          transform: scale(0.96);
        }
      }
    }
  }

  // 卡片呼吸灯动画
  @keyframes cardPulse {
    0% {
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }
    50% {
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }
    100% {
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }
  }

  @keyframes cardPulseWarning {
    0% {
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }
    50% {
      box-shadow: 0 4rpx 15rpx rgba(245, 158, 11, 0.2);
    }
    100% {
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }
  }

  @keyframes cardPulseDanger {
    0% {
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }
    50% {
      box-shadow: 0 4rpx 15rpx rgba(239, 68, 68, 0.2);
    }
    100% {
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }
  }

  @keyframes cardPulseInfo {
    0% {
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }
    50% {
      box-shadow: 0 4rpx 15rpx rgba(59, 130, 246, 0.2);
    }
    100% {
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }
  }
}

// 行业标签专用样式
.industry-tag {
  display: inline-block;
  padding: 4rpx 14rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  background-color: #eef2ff;
  color: #4f46e5;
  margin-left: 16rpx;
  font-weight: 500;
  border: 1px solid rgba(79, 70, 229, 0.2);
  vertical-align: middle;
  box-shadow: 0 1rpx 2rpx rgba(79, 70, 229, 0.05);
  transition: all 0.2s ease;
}

// 产品类型标签样式
.product-tag {
  display: inline-block;
  padding: 4rpx 14rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  background-color: #fff7ed;
  color: #c2410c;
  margin-left: 16rpx;
  font-weight: 500;
  border: 1px solid rgba(194, 65, 12, 0.2);
  vertical-align: middle;
  box-shadow: 0 1rpx 2rpx rgba(194, 65, 12, 0.05);
  transition: all 0.2s ease;
}
</style> 